<template>
    <div>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-swipe-cell v-for="item in shopCarList" :key="item.id">
                <van-card :num="item.num" :price="item.sell_price" :title="item.title" :thumb="item.thumb_path">
                    <div slot="footer">
                        <van-stepper @plus="add(item.id)" @minus="sub(item.id)" v-model="item.carNum"/>
                    </div>
                </van-card>
                <template slot="right">
                    <van-button square type="danger" text="删除" @click="delCarGoods(item.id)"/>
                </template>
            </van-swipe-cell>
        </van-pull-refresh>
        
        <van-submit-bar :price="totalPrice" :disabled="false" :button-text="'结算(' + countNum + ')'"/>
        <div v-show="shopCarList.length ===0 ? true : false" class="empty">
            <img src="../assets/cart_empty.png" alt>
            <p>购物车空空如也</p>
            <van-button @click="goGoodsList" type="info" size="small">去逛逛</van-button>
        </div>
    </div>
</template>

<script>
import { mapState, } from 'vuex'
export default {
  data() {
    return {
        isLoading: false,
        shopCarList: [],
        countNum: 0,
        totalPrice: 0,
    };
  },
  computed: {
    ...mapState(['goodsList']),
  },
  mounted() {
      this.getShopCarList();
  },
  methods: {
    add(id) {
        this.shopCarList.forEach(item => {
            if (item.id === id) {
                item.carNum++;
                this.countNum++;
                this.totalPrice += item.sell_price * 100;
                this.$store.commit('add', id);
            }
        })
    },
    sub(id) {
        this.shopCarList.forEach(item => {
            if (item.id === id) {
                item.carNum--;
                this.countNum--;
                this.totalPrice -= item.sell_price * 100;
                this.$store.commit('sub', id);
            }
        })
    },

    async getShopCarList() {
        if (this.goodsList.length === 0) return;
        let ids = [];
        this.goodsList.forEach(item => {
            ids.push(item.id);
        });
        const {data: res} = await this.$http.get('/api/goods/getshopcarlist/' + ids.join(','));
        
        this.shopCarList = res.message;

        this.shopCarList.forEach(item => {
            this.goodsList.forEach(i => {
                if (i.id === item.id) {
                    item.carNum = i.num;
                }
            })
            this.countNum += item.carNum;
            this.totalPrice += item.carNum * item.sell_price * 100;
        })
    },
    onRefresh() {
        setTimeout(() => {
            this.$toast('刷新成功');
            this.isLoading = false;
        }, 500);
    },
    delCarGoods(id) {
        this.$dialog.confirm({
            title: '警告',
            message: '是否删除该商品',
        }).then(async () => {
            const i = this.shopCarList.findIndex(item => item.id === id);
            this.countNum -= this.shopCarList[i].carNum;
            this.totalPrice -= this.shopCarList[i].carNum * this.shopCarList[i].sell_price * 100;
            this.shopCarList.splice(i, 1);
            this.$store.commit('delCarGood', id);
            this.$notify({ type: 'success', message: '删除成功' });
        }).catch(() => {
            this.$notify({ type: 'danger', message: '取消删除' });
        });
    },
    goGoodsList() {
        this.$router.push('/goods/list');
    }
  }
};
</script>

<style lang="less" scoped>
.van-card {
    margin: 5px 0;
}

.van-submit-bar {
    bottom: 50px;
}

.van-button--square {
    height: 100%;
}
.empty {
  color: #ccc;
  padding: 15px 0;
  img{
    width:100px;
    
  }
  text-align: center;
}
</style>